.segmented {
  height: max-content;
  list-style: none;
  display: flex;
  padding: 4px;
  background-color: var(--el-bg-color);
  border: var(--el-border);
  border-radius: var(--el-border-radius-base);
  box-sizing: border-box;

  &-item {
    width: 100%;
    height: 100%;
    border-radius: var(--el-border-radius-base);
    margin-left: 2px;
    margin-right: 2px;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: var(--el-font-size-base);
    padding: 4px 11px;
    &-small {
      padding: 2px 7px;
      font-size: 12px;
    }
    &-large {
      padding: 8px 15px;
      font-size: var(--el-font-size-base);
    }
    &-select-primary {
      background-color: var(--el-color-primary);
      color: var(--el-color-white);
      border: var(--el-border);
      border-color: var(--el-color-primary);
    }

    &-select-primary.is-plain {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      border: var(--el-border);
      border-color: var(--el-color-primary);
    }

    &-select-success {
      background-color: var(--el-color-success);
      color: var(--el-color-white);
      border: var(--el-border);
      border-color: var(--el-color-success);
    }

    &-select-success.is-plain {
      background-color: var(--el-color-success-light-9);
      color: var(--el-color-success);
      border: var(--el-border);
      border-color: var(--el-color-success);
    }

    &-select-warning {
      background-color: var(--el-color-warning);
      color: var(--el-color-white);
      border: var(--el-border);
      border-color: var(--el-color-warning);
    }

    &-select-warning.is-plain {
      background-color: var(--el-color-warning-light-9);
      color: var(--el-color-warning);
      border: var(--el-border);
      border-color: var(--el-color-warning);
    }

    &-select-info {
      background-color: var(--el-color-info);
      color: var(--el-color-white);
      border: var(--el-border);
      border-color: var(--el-color-info);
    }

    &-select-info.is-plain {
      background-color: var(--el-color-info-light-9);
      color: var(--el-color-info);
      border: var(--el-border);
      border-color: var(--el-color-info);
    }

    &-select-danger {
      background-color: var(--el-color-danger);
      color: var(--el-color-white);
      border: var(--el-border);
      border-color: var(--el-color-danger);
    }

    &-select-danger.is-plain {
      background-color: var(--el-color-danger-light-9);
      color: var(--el-color-danger);
      border: var(--el-border);
      border-color: var(--el-color-danger);
    }

    &-primary {
      border: var(--el-border);
      border-color: transparent;
      &:hover {
        background-color: var(--el-color-primary);
        color: var(--el-color-white);
      }
    }

    &-primary.is-plain {
      &:hover {
        background-color: var(-light-9);
        color: var(--el-color-primary);
        border: var(--el-border);
        border-color: var(--el-color-primary);
      }
    }

    &-success {
      border: var(--el-border);
      border-color: transparent;
      &:hover {
        background-color: var(--el-color-success);
        color: var(--el-color-white);
      }
    }

    &-success.is-plain {
      &:hover {
        background-color: var(--el-color-success-light-9);
        color: var(--el-color-success);
        border: var(--el-border);
        border-color: var(--el-color-success);
      }
    }

    &-warning {
      border: var(--el-border);
      border-color: transparent;
      &:hover {
        background-color: var(--el-color-warning);
        color: var(--el-color-white);
      }
    }

    &-warning.is-plain {
      &:hover {
        background-color: var(--el-color-warning-light-9);
        color: var(--el-color-warning);
        border: var(--el-border);
        border-color: var(--el-color-warning);
      }
    }

    &-info {
      border: var(--el-border);
      border-color: transparent;
      &:hover {
        background-color: var(--el-color-info);
        color: var(--el-color-white);
      }
    }

    &-info.is-plain {
      &:hover {
        background-color: var(--el-color-info-light-9);
        color: var(--el-color-info);
        border: var(--el-border);
        border-color: var(--el-color-info);
      }
    }

    &-danger {
      border: var(--el-border);
      border-color: transparent;
      &:hover {
        background-color: var(--el-color-danger);
        color: var(--el-color-white);
      }
    }

    &-danger.is-plain {
      &:hover {
        background-color: var(--el-color-danger-light-9);
        color: var(--el-color-danger);
        border: var(--el-border);
        border-color: var(--el-color-danger);
      }
    }
  }
  .is-disabled{
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
    color: var(--el-text-color-regular);
  }
}
